<script setup>
import { ref, onMounted } from "vue";
import { User_Tags } from "@/api";

let props = defineProps({
    is_show: {
        type: Boolean,
        default: false,
    },
});
// 宏函数：声明event事件
let emit = defineEmits(['close', 'confirm', 'tagId']);

// 获取用户标签列表
let seclectedTags = ref([])
let tags_list = ref([])
let user_tags = async () => {
    let { status, msg, data } = await User_Tags.obtain_user_tags(1);
    if (status === 200) {
        tags_list.value = data;
    } else {
        ElMessage.error(msg);
    }
}

// 关闭和取消
let handleTagsClose = () => {
    seclectedTags.value = [];
    emit('close')
}

// 点击确定
let handleConfirm = () => {
    let selectedTagName = [];
    let selectedTagId = [];
    seclectedTags.value.forEach(item => {
        selectedTagName.push(item.label_name);
        selectedTagId.push(item.id);
    })
    emit('confirm', selectedTagName);
    emit('tagId', selectedTagId);
}

onMounted(() => {
    user_tags();
})

</script>

<template>
    <el-dialog :model-value="is_show" title="请选择用户标签" @close="handleTagsClose">
        <div v-for="item in tags_list">
            <p>{{ item.name }}</p>
            <el-checkbox-group v-model="seclectedTags">
                <template v-for="tag in item.label" :key="tag.id">
                    <el-checkbox-button class="tags-checked" :label="tag">
                        {{ tag.label_name }}
                    </el-checkbox-button>
                </template>
            </el-checkbox-group>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleConfirm">确定</el-button>
                <el-button @click="handleTagsClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less">
.tags-checked {
    margin-right: 10px;

    span {
        border: none;
        background-color: #ccc;
    }
}

.el-checkbox-button:first-child .el-checkbox-button__inner {
    border: none;
    border-radius: 0;
}
</style>